<template>
  <div>
    <h1>学号后三位+姓名</h1>
    <button @click="getData">请求</button>
    <table>
      <caption>
        图书列表
      </caption>
      <thead>
        <tr>
          <th>编号</th>
          <th>书名</th>
          <th>作者</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in bookData.list" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.author }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import request from "../src/axios/request.js";
import { reactive } from "vue";
const bookData = reactive({
  list: []
});
const getData = () => {
  request({
    url: "/mock/getBooks",
    method: "get"
  })
    .then((res) => {
      bookData.list = res.data.data;
      console.log(res);
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>
<style>
table {
  border-collapse: collapse;
  width: 100%;
  margin-top: 20px;
}
th,
td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}
th {
  background-color: #f2f2f2;
}
</style>
